<template>
	<div class="blog">
		<!-- 导航 -->
		<div class="blog-breadcrumb">
			<BreadCrumb :renderArrs="renderArrs"></BreadCrumb>
		</div>
		<div class="blog-main">
			<!-- 列表 -->
			<div class="blog-main-list">
				<div class="blog-main-list-item" v-for="value in 10">
					<blog-summary mode="pc"></blog-summary>
				</div>
				<div class="blog-main-pagination">
					<pagination></pagination>
				</div>
			</div>
			<!-- 右侧其他 -->
			<div class="blog-main-other">
				<!-- 热门标签 -->
				<div class="blog-main-other-hotTag">
					<blog-pc-hot-tag></blog-pc-hot-tag>
				</div>
				<!-- 最新文章 -->
				<div class="blog-main-other-newBlog">
					<blog-pc-new-blog></blog-pc-new-blog>
				</div>
				<!-- 热门文章 -->
				<div class="blog-main-other-hotBlog">
					<blog-hot-blog mode="pc"></blog-hot-blog>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	const renderArrs = [
		{
			cnName: '首页',
			path: '/',
		},
		{
			cnName: '博客',
			path: '/blog',
		},
	];
</script>

<style lang="scss" scoped>
	.blog {
		// width: calc(1024px + 50px + 360px);
		@include scaleWidth(calc(1024px + 50px + 360px));
		min-height: 500px;
		margin: 100px auto 0;
		.blog-main {
			@include flex(_, flex-start, flex-start);
			.blog-main-list {
				// width: 1024px;
				@include scaleWidth(1024px);
				margin-right: 50px;
				.blog-main-list-item {
					padding: 20px 0;
					border-bottom: 1px solid #e5e5e5;
					&:first-child {
						padding-top: 0;
					}
				}
				.blog-main-pagination {
					margin-top: 20px;
					@include flex;
				}
			}
			.blog-main-other {
				.blog-main-other-hotTag {
					z-index: 99;
					position: relative;
				}
				.blog-main-other-newBlog {
					margin-top: 20px;
				}
				.blog-main-other-hotBlog {
					margin-top: 20px;
				}
			}
		}
	}
</style>
